<template>
  <div>
    <RadioGroup v-model="type" @on-change="changeType" >
        <Radio :label="1"><span>图片</span></Radio>
        <Radio :label="2"><span>视频</span></Radio>
    </RadioGroup>
      <div class="all" >
        <div class="content">
          <vue-waterfall-easy  ref="waterfall" :imgsArr="imgsArr" @scrollReachBottom="_getrecycleList"  :reachBottomDistance="40"  :maxCols="6">
            <div class="img-info" slot-scope="props">
              <div class="imageClub">
                  <div class="cardInfo" >
                    <template v-if="type===1">
                      <div class="imageurl" @mouseover="changemodal(props.value)" @mouseout="changeout(props.value)" @click="changeClick(props.value)">
                        <img :src="props.value.path" width="100%" height="250px">
                        <div v-show="props.value.show" class="showstyle">
                          <span class="showtype">{{props.value.extension}}</span>
                        </div>
                      </div>
                      <div class="cardButton">
                          <span style="padding-top:10px">{{props.value.width}}*{{props.value.height}}</span>
                          <span style="padding-top:10px"><Icon type="ios-eye-outline" />{{props.value.click}}</span>
                          <div>
                            <Select v-model="props.value.linkUrl" style="width:80px" @on-change="changelink" >
                                <Option v-for="(it,idx) in props.value.selectList" :key="idx" :value="it.value" >{{it.label}}</Option>
                            </Select>
                          </div>

                      </div>
                    </template>
                    <template v-else>
                      <div class="videoBox" @click="changeClick(props.value)" >
                        <video :src="props.value.path" width="100%" height="180px" controls></video>
                      </div>
                      <div class="cardButton">
                        <!-- <Button size="small"  @click="changedel(props.value)">删除</Button> -->
                        <Button size="small">视频大小：{{props.value.size}}M</Button>
                        <span ><Icon type="ios-eye-outline" />{{props.value.click}}</span>
                      </div>
                    </template>
                    <div class="cardsmall">
                      <Button size="small" @click="changedel(props.value)" v-hasC="{name: '-v1-material-img-img-completely-del',flag: '/v1/material/img/img-completely-del'}" type="error" ghost>彻底删除</Button>
                      <Button size="small" @click="changeImg(props.value,1)" type="warning" ghost v-if="type===1" v-hasC="{name: '-v1-material-img-img-reduction',flag: '/v1/material/img/img-reduction'}">还原图片</Button>
                      <Button size="small" @click="changeImg(props.value,2)" type="warning" ghost v-else  v-hasC="{name: '-v1-material-img-img-reduction',flag: '/v1/material/img/img-reduction'}">还原视频</Button>
                    </div>
                  </div>
                </div>
                <!-- <Spin fix v-else>加载中...</Spin> -->
            </div>
          </vue-waterfall-easy>
        </div>
      </div>
  </div>
</template>
<script>
    import { getrecycleList, completeDel, materialtype, reductionInfo, tagsAdd, getclickAdd, hotList } from '@/api/myuplod.js'
    import vueWaterfallEasy from 'vue-waterfall-easy'
    // import template from '../../../components/search/template.vue'
    export default {
        props: {
            remark: String
        },
        components: {
            vueWaterfallEasy
            // Button
        },
        data () {
            return {
                type: 1,
                typeList: [],
                imgList: [],
                show: false,
                page: 1,
                total: 0,
                imgsArr: [],
                pageSize: 50
            }
        },
        created () {
            // this._getrecycle()
        },
        methods: {
            _getrecycle () {
                this.page = 1
                this.imgsArr = []
                this._getrecycleList()
            },
            // 鼠标移动效果
            changemodal (item) {
                item.show = true
            },
            changeout (item) {
                item.show = false
            },
            // 获取类别
            _gettype () {
                materialtype({}).then(res => {
                    this.typeList = res;
                }).catch(() => {
                    // this.tableLoading = false
                })
            },
            // 切换工具
            changelink () {
                //
            },
            changeType () {
                this.page = 1
                this.imgsArr = []
                this._getrecycleList()
            },
            // 获取列表数据
            _getrecycleList () {
                this.show = true
                let params = {
                    // tag_id: this.modalForm.tagIds.join('')
                    remark: this.remark,
                    page: this.page,
                    type: this.type
                }
                getrecycleList(params).then(res => {
                    const list = res.list.map(item => ({
                        ...item,
                        show: false,
                        remark: '',
                        selectList: [
                            {
                                value: '/swt/',
                                label: '快商通'
                            },
                            {
                                value: '/tell/',
                                label: '电话'
                            },
                            {
                                value: 'javascript:;',
                                label: '其他'
                            }
                        ]
                    }));
                    this.total = res.total
                    this.imgsArr = this.imgsArr.concat(list)
                    if (this.page * this.pageSize >= this.total) { // 模拟已经无新数据，显示 slot="waterfall-over"
                        this.$refs.waterfall.waterfallOver()
                        return
                    }
                    this.page++
                    this.show = false
                }).catch(() => {
                    // this.tableLoading = false
                })
            },
            changeClick (item) {
                getclickAdd({ id: item.id }).then(res => {
                    // this.$Message.success('标记成功');
                }).catch(() => {

                })
            },
            // 删除图片
            changedel (item) {
                this.$Modal.confirm({
                    title: this.type === 1 ? '彻底删除该图片，将无法恢复！如果该图片外部站点有引用，将导致外网图片无法访问。' : '彻底删除该视频，将无法恢复！如果该视频外部站点有引用，将导致外网视频无法访问。',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        let params = {
                            id: item.id,
                            type: this.type
                        }
                        completeDel(params).then(res => {
                            this.$Message.info('删除成功');
                            this._getrecycleList()
                        }).catch(() => {
                            // this.$Message.error('删除失败')
                        })
                    },
                    onCancel: () => {
                        // this.$Message.error('')
                    }
                })
            },
            // 还原视频或者图片
            changeImg (item, status) {
                this.$Modal.confirm({
                    title: this.type === 1 ? '是否还原该图片?' : '是否还原该视频?',
                    // content: '<p>Content of dialog</p><p>Content of dialog</p>',
                    onOk: () => {
                        let params = {
                            id: item.id,
                            type: this.type
                        }
                        reductionInfo(params).then(res => {
                            this.$Message.info('删除成功');
                            this._getrecycleList()
                        }).catch(() => {
                            // this.$Message.error('删除失败')
                        })
                    },
                    onCancel: () => {
                        // this.$Message.error('')
                    }
                })
            }
        }
    }
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  color: #515a6e;
  text-decoration: none;

}
a::active {
     color: #515a6e;
  }
html,
body,
.all {
  /* height: 100%;
  overflow: auto; */
  position: relative;

}
.content {
    /* position: absolute;
    top: 32px;
    bottom: 0; */
    width: 100%;
    height: 700px;
  }
.moreBut{
  text-align: center;
  padding: 20px 0;
  }
.imageClub{
  position: relative;
  /* padding: 20px 0; */
  /* display: flex; */
}
.imageCard{
  width: 280px;
  border-radius: 5px;
  display: inline-block;
  box-shadow: 0 1px 4px rgb(177, 175, 175);
  margin-right: 15px;
  margin-bottom: 15px;
}
  .cardInfo{
    padding: 15px;
  }
  .imageurl{
    width: 100%;
    /* background: rgb(99, 188, 223); */
    height:250px;
    position: relative;
  }
  .canvasImg{
    width: 100%;
    max-height: 250px;
    object-fit: contain;
  }
  .cardButton{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
  }
  .cardsmall{
    display: flex;
     justify-content: space-between;
     padding: 6px 0;
  }
  .boxFotter{
    padding:10px 0;
  }
  .showstyle{
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    left: 0;
    top: 0;
    opacity: .5;
  }
  .showtype{
    position: absolute;
    right:10px;
    top:10px;
    padding: 0px 20px;
    border-radius: 5px;
    background: #515a6e;
    font-size: 16px;
    color: #fff;
  }
  /deep/.ivu-select-single{
    height: 10px;
  }
   .resdata{
    padding: 50px 0;
    text-align: center;
    color: #888;
    font-size: 16px;
  }
</style>
